<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image style="width: 100rpx;height: 100rpx;" src="/static/logo.png" mode="widthFix">
			</image>
			<text class="title">英语小游戏登录</text>
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model.trim="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model.trim="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block bg-primary  lg round text-white">登录</button>
			</view>
			<view class="reg text-center" >
				<text class="text-grey1 ">没有账号？</text>
				<text class=" text-primary">立即注册</text>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {toast,throttle} from 'luoyu-uni-utils'
	import {
		ref
	} from 'vue';
	//引入用户的全局状态管理
	import {useUserStore} from '@/store/modules/user.js'
	//使用全局状态管理
	const userStore = useUserStore()
	
	//用户登录信息对象
	const loginForm = ref({
		username:'',//用户名
		password:''//用户密码
	}) 
	
	//登录方法
	function handleLogin() {
		//设置加载状态
		uni.showLoading({
			title:"登录中..."
		})
		
		//调用用户全局状态中的登录方法
		userStore.Login(loginForm.value).then(() =>{
			//登录成功之后要关闭这个加载的状态
			uni.hideLoading()
			//请求成功提示用户已经登录成功
			toast("登录成功")
			//然后我们要跳转回首页,
			//reLaunch 用于关闭所有的页面然后直接跳转到指定的页面中
			//因为提示了内容所以我们要延迟跳转
			//throttle 方法第一个参数是一个回调函数，用于执行需要延迟的内容，第二个参数是一个整数类型，用于指定延迟方法的执行时间,返回一个方法的返回值可以直接调用，等待时间到达直接执行
			const fn =  throttle(function(){
				uni.reLaunch({
					url:"/pages/index/index"
				})
			},1500)
			fn()
		}).catch((error) =>{
			//请求失败也要关闭加载的状态
			uni.hideLoading()
		})
		
		
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
			}

			.reg {
				margin-top: 15px;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}
		}
	}
</style>